<html>

<head>
<title>Learning WebGL &mdash; lesson 13</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<link href="../lessons.css" type="text/css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="../../../build/PhiloGL.js"></script>
<script type="text/javascript" src="index.js"></script>

<script id="per-fragment-lighting-fs" type="x-shader/x-fragment">
  #ifdef GL_ES
  precision highp float;
  #endif

  varying vec2 vTextureCoord;
  varying vec4 vTransformedNormal;
  varying vec4 vPosition;

  uniform bool hasTexture1;

  uniform mat4 viewMatrix;
  uniform bool enableLights;
  uniform vec3 ambientColor;

  uniform vec3 pointLocation[1];
  uniform vec3 pointColor[1];

  uniform sampler2D sampler1;

  void main(void) {
    vec3 lightWeighting;
    if (!enableLights) {
      lightWeighting = vec3(1.0, 1.0, 1.0);
    } else {
      vec3 lightDirection = normalize((viewMatrix * vec4(pointLocation[0], 1.0)).xyz - vPosition.xyz);

      float directionalLightWeighting = max(dot(normalize(vTransformedNormal.xyz), lightDirection), 0.0);
      lightWeighting = ambientColor + pointColor[0] * directionalLightWeighting;
    }

    vec4 fragmentColor;
    if (hasTexture1) {
      fragmentColor = texture2D(sampler1, vec2(vTextureCoord.s, vTextureCoord.t));
    } else {
      fragmentColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
    gl_FragColor = vec4(fragmentColor.rgb * lightWeighting, fragmentColor.a);
  }
</script>

<script id="per-fragment-lighting-vs" type="x-shader/x-vertex">
  attribute vec3 position;
  attribute vec3 normal;
  attribute vec2 texCoord1;

  uniform mat4 worldMatrix;
  uniform mat4 projectionMatrix;
  uniform mat4 worldInverseTransposeMatrix;

  varying vec2 vTextureCoord;
  varying vec4 vTransformedNormal;
  varying vec4 vPosition;


  void main(void) {
    vPosition = worldMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * vPosition;
    vTextureCoord = texCoord1;
    vTransformedNormal = worldInverseTransposeMatrix * vec4(normal, 1.0);
  }
</script>

</head>

<body onload="webGLStart();">
  <canvas id="lesson13-canvas" style="border: none;" width="500" height="500"></canvas>
<script src="https://gist.github.com/818025.js"> </script>
  <br/>
<input type="checkbox" id="lighting" checked /> Use lighting<br/>
<input type="checkbox" id="per-fragment" checked /> Per-fragment lighting<br/>
<input type="checkbox" id="textures" checked /> Use textures<br/>

<br/>
<h2>Point light:</h2>

<table style="border: 0; padding: 10px;">
<tr>
<td><b>Location:</b>
<td>X: <input type="text" id="lightPositionX" value="0.0" />
<td>Y: <input type="text" id="lightPositionY" value="0.0" />
<td>Z: <input type="text" id="lightPositionZ" value="0.0" />
</tr>
<tr>
<td><b>Colour:</b>
<td>R: <input type="text" id="pointR" value="0.8" />
<td>G: <input type="text" id="pointG" value="0.8" />
<td>B: <input type="text" id="pointB" value="0.8" />
</tr>
</table>

<h2>Ambient light:</h2>
<table style="border: 0; padding: 10px;">
<tr>
<td><b>Colour:</b>
<td>R: <input type="text" id="ambientR" value="0.2" />
<td>G: <input type="text" id="ambientG" value="0.2" />
<td>B: <input type="text" id="ambientB" value="0.2" />
</tr>
</table>


<br/>
Moon texture courtesy of <a href="http://maps.jpl.nasa.gov/">the Jet Propulsion Laboratory</a>.
<br/>
<br/>

  <a href="http://learningwebgl.com/blog/?p=1523">&lt;&lt; Back to Lesson 13</a><br />
</body>

</html>
